<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    *state是组件对象最重要的属性，值是对象(可以包含多个键值对的集合)
    *组件被称为状态机，通过更新组件的state来更新页面的显示(重新渲染组件)
    * */
    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
            this.state = {flag: true}
            this.changeFlag = this.changeFlag.bind(this)
        }

        render() {
            const {flag} = this.state
            console.log("render函数被触发了")
            return (
                <div className="app">
                    <h1>今天天气很{flag ? "炎热" : "凉爽"}</h1>
                    <button onClick={this.changeFlag}>切换</button>
                </div>
            );
        }

        changeFlag() {
            // this.state.flag=!this.state.flag 注意state状态不可以直接更改，需要借助setState函数来修改

            // setState函数做了两件事件：1.修改数据、2.触发render()函数
            this.setState({flag: !this.state.flag}, () => {
                // 能拿到更新后的最新值
                console.log("修改了flag", this.state.flag)
            })
            // 拿不到更新后的最新值
            console.log(this.state.flag)
        }

    }

    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>